<template>
  <!-- 项目树 -->
  <div class="v-project-group-tree">
    <m-tree
      :treeData="treeData"
    >
      <span :id="'v'+nodeData.id" slot-scope="{nodeData}" @click="handleNodeClick(nodeData)" >
        <img
          v-if="nodeData.nodeType!=='ROOT'"
          :src="nodeData.nodeType==='GROUP'?'statics/images/mainpage/projectGroup.png':'statics/images/mainpage/project.png'"
          style="position: relative;top: -2px;left: 0px;width: 16px;height: 16px;"
          class="g-pointer"
        />
        <span class="g-m-l-4 _display-title g-pointer" :class="{_selected:nodeData.selected,_disabled:nodeData.disabled}">{{nodeData.nodeName || '---'}}</span>
      </span>
    </m-tree>
  </div>
</template>
<script>
import { treeForEach, initTree, findNodeByValue } from 'src/util/common';
import Tree from 'src/components/common/Tree/MTree';

export default {
  name: 'comp-project-group-tree',
  components: {
    "m-tree": Tree
  },
  props: {
    treeData: Array
  },
  data() {
    return {
    };
  },
  mounted(){

  },
  methods: {
    handleNodeClick(nodeData){
      if (nodeData.disabled) return;
      this.$emit('select', nodeData);
    },
    handleCheckChange(nodeData, event){
      this.$emit('check', nodeData);
      if (nodeData.type === 'REQTABLE'){
        nodeData.children && nodeData.children.forEach(node => {
          node.checked = event.target.checked;
        });
      } else {
        let selectData = nodeData.parent.children.filter(item => {
          return item.checked == true;
        });
        selectData.length == nodeData.parent.children.length ? nodeData.parent.checked = true : nodeData.parent.checked = false;
      }
    },
    getSelectedNodes(){
      const nodes = [];
      treeForEach(this.treeData, node => {
        if (node.selected === true) nodes.push(node);
      });
      return nodes;

    },
    getCheckedNodes(){
      const nodes = [];
      treeForEach(this.treeData, node => {
        if (node.checked === true) nodes.push(node);
      });
      return nodes;
    }
  }
};
</script>
<style lang="scss">
.v-project-group-tree {
  ._display-title {
    &._selected {
      background-color: #3483b8;
      color: #fff ;
    }
    &._disabled {
      color: lightgray;
      &._selected {
         background-color: #fff;
      }
    }
  }
}

</style>